Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

您所在的位置:网站首页 $broadcast angularjs Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

2024-01-03 17:16| 来源: 网络整理| 查看: 265

欢迎大家到我的博客查看本文对应内容,关注和交流对于Angular和Ionic学习的理解。

Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了。具体到开发中,对应着$scope和$rootScope的$emit、$broadcast和$on方法。本文介绍Angular的事件机制,包括$scope和$rootScope处理事件上的异同,$broadcast、$emit和$on的使用方式及他们区别等内容。

$scope与$scope之间的关系,$scope与$rootScope之间的关系

要理解Angular的事件机制,首先需要了解$scope与$scope之间的关系以及$scope与$rootScope之间的关系。$rootScope是唯一真神,是万域起源,是所有$scope的最终祖先。而$scope与$scope之间可能的关系包括父子关系和兄弟关系。还记得controller之间的关系吗,Angular为每个controller分配一个独立的$scope,controller之间的关系也对应着$scope之间的关系:

{ { parent.data }} { { sib1.data }} { { sib2.data }} 发布、订阅、退订

$broadcast和$emit用于发布事件,他们将事件名称和事件内容发布出去,就像是高考榜单一样,事件名称相当于考生的名字,而事件内容相当于考生的成绩等信息:

$scope.$broadcast('EVENT_NAME', 'Data to send'); $scope.$emit('EVENT_NAME', 'Data to send');

$on用于订阅事件,事件名称是订阅的唯一标识,每个考生看榜单时都要寻找自己的名字,然后根据自己的成绩等信息决定下一步应该报考什么学校:

$scope.$on('EVENT_NAME', function(event, args) { // balabala });

Angular的退订事件有些奇怪,



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3